@charset "utf-8";
@import "common";

//共用类
.dot_box{
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 1px solid $borderColor;
    border-radius: 50%;
    position: relative;
    box-sizing: border-box;
    .dot{
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto;
        height: 6px;
        width: 6px;
        box-sizing: border-box;
    }
}

.index{
    @include wrap;
    width:1000px;
    font-size: 0;
    height: 59px;
    line-height: 59px;
//  border-bottom: 1px solid #dfdfdf;
    *{
        font-size: 13px;
    }
    span{
        margin-left: 14px;
    }
    a{
        color: black;
        &:hover{
            color:$aChooes;
        }
    }
}
.banner_wrap{
    width:100%;
    position: relative;
    .banner{
       width: 100%;
       height: 300px;
       text-align: center;
       overflow: hidden;
       img{
           width: 100%;
           vertical-align: middle;
       } 
    }
    .banner_content_wrap{
        width: 100%;
        height: 100px;
        background: rgba(0,0,0,.7);
        position: absolute;
        bottom: 0;
        .banner_content{
            @include wrap(960px);
            margin-top:-17px;
            div{
                display: inline-block;
                p{
                    color: white;
                    line-height: 34px;
                }
                p:first-child{
                    font-size: 18px;
                    text-transform: uppercase;
                }
                p:nth-child(2){
                    font-size: 14px;
                }
            }
            span{
                float: right;
                margin-top: 33px;
                font-size: 0;
                display: flex;
                justify-content: space-between;
                width: 129px;
                margin-right: 20px;
            }
            a{
                display: inline-block;
                @include btn(58px,26px);
                border-radius: 3px;
                font-size: 14px;
            }
        }
        .bannerPic{
            width: 100px;
            height: 100px;
            overflow: hidden;
            border-radius:3px;
            margin:0 25px 0 3px;
            img{
                width: 100%;
            }
        }
        .bannerCon{
            vertical-align: top;
            margin-top: 33px;
        }
    }
}
.main{
    @include wrap(960px);
    box-sizing: border-box;
    margin-top: 10px;
    .function_bar{
        width: 100%;
        height: 52px;
        border:1px solid $borderColor;
        display: flex;
        position: relative;
        .selector{
            width: 138px;
            height: 52px;
            border-right: 1px solid $borderColor;
            text-align: center;
            line-height: 52px;
            i{
                display: inline-block;
                height:6px;
                width:11px;
                background: url(../img/selector.png) no-repeat 0 0/100% auto;
                vertical-align: middle;
                margin-left: 13px;
            }
        }
        .radio{
            display: flex;
            align-items: center;
            div{
                margin-left: 23px;
                
            }
            input{
                display: none;
            }
            label{
                display: inline-block;
                vertical-align: middle;
                font-size: 14px;
                cursor: pointer;
                i{
                    background: red;
                }
            }
        }
    }
}
.proNum{
    display: flex;
    position: absolute;
    right: 0;
    height: 100%;
    align-items: center;
    font-size: 14px;
    p{
        span{
            vertical-align: text-top;
        }
    }
    p:first-child{
        color:#a9a9a9;
        .amount{
            color:#444f58;
        }
    }
    p:nth-child(2){
        color:#444f58;
        margin: 0 17px 0 22px;
        .now_page{
            color: red;
        }
    }
}
.product_display{
    margin-top: 12px;
    display: flex;
    flex-direction: column;
}
.row{
    display: flex;
    width: 100%;
    justify-content: space-between;
    .imgFix{
        width: 100%;
        height: 230px;
        border:1px solid $borderColor;
        overflow: hidden;
        margin: 0;
        img{
            width: 100%;
            vertical-align: middle;
            transform: scale(1);
            transition: all 300ms;
        }
    }
    >div{
        width:232px;
        height: 336px;
        font-size: 14px;
        p{
            color: #444f58;
            margin-top:12px
        }
        span{
            color:#a9a9a9;
            margin-left: -3px;
            margin-top:7px
        }
        i{
            position: relative;
            top:1px;
        }
        &:hover{
            img{
                transform: scale(1.5);
            }
            p{
                color: red;
                text-decoration: underline;
            }
        }
    }
}
.page{
    margin-top: 15px;
    margin-bottom: 44px;
    display: flex;
    justify-content: flex-end;
    font-size: 13px;
    ul{
        display: flex;
        justify-content: flex-end;
        li{
            width: 36px;
            min-height: 36px;
            border-radius: 3px;
            border:1px solid $borderColor;
            line-height: 36px;
            margin-left: 7px;
            a{
                font-size: 13px;
                width: 100%;
                height: 100%;
                display: inline-block;
                text-align: center;
                line-height: 36px;
                &:hover{
                    color: $aChooes;
                }
               span{
                    display: inline-block;
                    overflow: hidden;
                    font-size: 1px;
                    width:11px;
                    height: 7px;
                    background: url(../img/selector.png) no-repeat 0 0/100% 100%; 
                }
               .pre{
                   transform: rotate(90deg);
               }
               .next{
                   transform: rotate(-90deg);
               }
              
            }
           
        }
        .pageActive{
            border-color: $aChooes;
            a{
                color: $aChooes;
            }
        }
         li:last-child{
           margin-left: 14px;
        }
        .noborder{
            border:none;
        }
        
    }
    >span{
        width: 66px;
        max-height: 36px;
        border:1px solid $borderColor;
        line-height: 36px;
        border-radius: 3px;
        input{
            width: 40%;
            margin-left: 10px;
            border: none;
        }
    }
    >a{
        width: 66px;
        max-height: 36px;
        border:1px solid $borderColor;
        line-height: 36px;
        border-radius: 3px;
        text-align: center;
        margin-left: 9px;
    }
}